import './HomePage.css';
import React from "react";
//引入button组件
import {Button} from "antd";
//引入路由
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate 函数
//引入状态管理
import {useAtom} from 'jotai';
//获取计数原子
import {countAtom} from "../../store/atoms";

/**
 *  首页页面
 * @constructor
 */
const HomePage: React.FC = () => {
    //获取状态管理的计数值
    const [countNum] = useAtom(countAtom);

    // 定义一个 useNavigate 函数
    const navigate = useNavigate();

    /**
     * 跳转到“关于我们”页面
     */
    const handleGoToAbout = () => {
        // 点击按钮后跳转到 /about 页面
        navigate('/about');
    };

    return (
        <div className="home-page">
            <main className="home-main">
                <h2>我们的服务</h2>
                <p>这里是首页的内容，你可以放一些介绍或功能模块。</p>
                <Button type="primary" onClick={handleGoToAbout}>进入about页面</Button>
                <div>{countNum}</div>
            </main>
        </div>
    );
};

export default HomePage;
